<template>
	<view class="page" :class="getThemeClass">
		<view class="coll-head">
			<u-tabs
				:list="tabs" 
				:is-scroll="false" 
				:current="current" 
				@change="change" 
				:active-color="getMainColor" 
				:inactive-color="getNavInactiveColor" 
				:bg-color="getBgColor"
			></u-tabs>
		</view>
		<view class="gap-100"></view>
		<empty v-if="!list.length"></empty>
		<view v-for="(item, index) in list" :key="index" class="itemBox card-bg">
			<view class="head_img">
				<image :src="item.cover" mode="widthFix"></image>
				<view class="casting_info">
					<view class="casting_head">
						<view class="head_left">
							<!-- NFT铸品名称 -->
							<view class="name">{{ item.title }}</view>
							<view class="price">
								<text>￥</text>
								{{ item.total }}
							</view>
						</view>
						<view class="head_right color-green">
							<!-- 已完成 -->
							{{ item.order_status_text }}
						</view>
					</view>
					<view class="casting_flex border-color">
						<view class="casting_left text-call">订单号</view>
						<view class="casting_right">
							<view>{{ item.out_trade_no }}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="btns" v-if="current==1">
				<botBtn 
					padding="18rpx 78rpx"
					@click="getExpress(item.id)"
					type="error"
					plain
				>
					<text>查看物流</text>
				</botBtn>
				
				<botBtn
					padding="20rpx 80rpx"
					@click="shouhuo(item.id)"
				>
					<text>确认收货</text>
				</botBtn>
			</view>
			<view class="btns" v-if="current==2">
				<!-- <botBtn 
					padding="18rpx 78rpx"
					@click="getExpress(item.id)"
					type="error"
					plain
				>
					<text>查看物流</text>
				</botBtn> -->
				<botBtnp
					padding="20rpx 80rpx"
					@click="godetail(item.id)"
				>
					<text>查看详情</text>
				</botBtnp>
			</view>

		</view>
		<uni-load-more :status="loadStatus"></uni-load-more>
		
		<express :express="express" ref="express"></express>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				page:1,
				list:[],
				loadStatus:'noMore',
				tabs: [{
					name:'待发货',
					id:2
				},{
					name:'待收货',
					id:3
				},{
					name:'已完成',
					id:4
				}],
				current: 0,
				express:{}
			}
		},
		onLoad() {
			this.loadData(true)
		},
		methods:{
			loadData(flag){
				if(flag)this.page=1
				this.$u.api.myOrders_index({
						page: this.page,
						current: this.tabs[this.current].id
					}).then(res => {
					if (res.code == 200) {
						this.list = flag? res.data.list.data:this.list.concat(res.data.list.data);
						this.loadStatus = res.data.list.next_page_url?'more':'noMore'
					}
				})
			},
			change(index) {
				if(this.current==index)return
				this.current = index;
				this.loadData(true)
			},
			getExpress(id){
				uni.showLoading({
					title: '加载中...',
					mask: false
				})
				this.$u.api.myOrders_express({
					order_id: id
				}).then(res=>{
					this.express = res.data.data
					this.$refs.express.show()
				})
			},
			shouhuo(id){
				this.$u.api.myOrders_receive({
					order_id: id
				}).then(res=>{
					uni.showToast({
						title:"操作成功",
						icon:"none"
					})
					this.loadData(true)
				})
			},
			godetail(id){
				uni.navigateTo({
					url:`/pages/my/logistics-order/logistics-detail?id=${id}`
				})
			}
		}
	}
</script>

<style lang="scss">
	.coll-head{
		width: 750rpx;
		position: fixed;
		// top: calc(44px + var(--status-bar-height));
		// left: 0;
		z-index: 10;
	}
	.itemBox {
		overflow: hidden;
		margin: 32rpx 30rpx;
		border-radius: 30rpx;
		// background-color: #fff;
	}
	
	.head_img {
		image {
			width: 100%;
		}
	}
	
	.casting_info {
		padding: 0 30rpx;
	
		.casting_head {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 190rpx;
	
			.name {
				// color: #111111;
				font-size: 32rpx;
				margin-bottom: 36rpx;
				font-weight: bold;
			}
	
			.price {
				// color: #a11716;
				font-size: 38rpx;
	
				text {
					font-size: 26rpx;
				}
			}
	
			.head_right {
				// color: #eeb32e;
				font-weight: bold;
				font-size: 30rpx;
			}
	
		}
	
		.casting_flex {
			height: 96rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
	
			.casting_left {
				// color: #999999;
				font-size: 26rpx;
			}
	
			.casting_right {
				// color: #111111;
				font-size: 28rpx;
				display: flex;
				align-items: center;
	
				.avatar {
					width: 44rpx;
					height: 44rpx;
					border-radius: 50%;
					margin-right: 24rpx;
					overflow: hidden;
	
					image {
						width: 100%;
					}
				}
	
				.uicon {
					margin-left: 20rpx;
					width: 22rpx;
					border-radius: 0;
				}
			}
		}
	
		.casting_flex + .casting_flex {
			border-top: 1px solid;
		}
	}
	
	.btns {
			width: 100%;
			display: flex;
			justify-content: space-between;
			margin: 30rpx 0 30rpx 0rpx;
			.btn {
				width: 300rpx;
				height: 94rpx;
				line-height: 94rpx;
				text-align: center;
				// background-color:  #764E39;
				// color: #fff;
				font-size: 32rpx;
				border-radius: 10rpx;
			}
			.cancel{
				background-color: #fff;
				border: 3rpx solid red;
				color: red;
			}
		}
		.dfk{
			display: flex;
			// color: #ffffff;
			width: 630rpx;
			margin-top: 20rpx;
		}
</style>